<template>
  <div class="app-container">
    <div class="toolbar">
      <el-button type="primary" @click="onCreated">创建课题</el-button>

      <el-date-picker
        class="date-picker"
        v-model="selectedYear"
        type="year"
        placeholder="选择年"
      />
      
    </div>
    <el-table
      border
      style="width: 100%"
      :data="theses"
    >
      <el-table-column
        prop="title"
        label="课题名称"
      >
        <!-- <template slot-scope="scope">
          <el-button type="text" @click="onViewDetails(scope.row.id)">{{ scope.row.title }}</el-button>
        </template> -->
      </el-table-column>

      <el-table-column prop="created" label="创建时间" width="230">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ new Date(scope.row.created).toLocaleString() }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="课程详情"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="onViewDetails(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="课题状态" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'" type="success">选定中</el-tag>
          <el-tag v-else type="danger">已选定</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="students" label="已报名学生" width="300">
        <template slot-scope="scope">
          <el-tooltip v-for="s in scope.row.students" :key="s.id"  placement="top" effect="light">
            <div slot="content">
              <p>学生id：{{s.id}}</p>
              <p>手机号:{{ s.phone }}</p>
              <p>QQ:{{ s.qq }}</p>
            </div>
              <!-- <StudentTag>也可 -->
              <student-tag :text="s.name" size="medium" type="success" 
              :checkable="scope.row.status !='3'"
              @check="onStudentCheck(scope.row.id,s.id)" >
                {{ s.name }}
              </student-tag>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        label="分数"
        width="100"
      >
      </el-table-column>

      <el-table-column
        prop="name"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="onEdit(scope.row.id, scope.row.title, scope.row.created)">编辑</el-button>
          <el-button
            v-if="!scope.row.students || scope.row.students.length <= 0"
            type="danger"
            size="small"
            @click="onDelete(scope.row.id)"
          >删除</el-button>
          <el-button type="primary" size="small" @click="onGrade(scope.row.id)">
            <i class="el-icon-edit"></i>
            分数
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="thesisTitle"
      :visible.sync="isDialogVisible"
    >
      <div v-loading="contentLoading">
        {{thesis.content || ''}}
      </div>
      <el-button slot="footer" type="primary" @click="isDialogVisible = false">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getTheses, getThesisById,deleteTheses2 ,choseStudent} from '@/api/theses'
// import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import StudentTag from './components/StudentTag'
export default {

  //注册组件
  components:{
    StudentTag
  },

  data() {
    return {
      selectedYear: '',
      theses: [],
      thesis: {},
      isDialogVisible: false,
      thesisTitle: '课程详情',
      contentLoading: false,

    }
  },

  computed: {
    // uid(){
    //   return this.$store.state.user.uid
    // }
    // ...mapState {
    //   uid: (state) => state.user.uid
    // }
    ...mapGetters(['uid'])
    
  },


  //侦听属性 (监听data属性变化，做异步处理)
  watch:{
      isDialogVisible(value){
        if(value){
          // 发送请求，获取课题详情
          getThesisById(this.thesisId).then(res =>{
          this.thesis = res.data.data
          this.contentLoading = false
      })
        }
      }
  },

  created() {
    console.log('computed:',this.uid)
    getTheses(this.uid, 2020).then(res => {
      console.log(res)
      this.theses = res.data.data
    })
  },

  methods: {
    onViewDetails(id) {
      this.thesisId = id
      // 弹出对话框，显示课题详情
      
      this.isDialogVisible = true
    },

    onEdit(id , title, created) {
      console.log('onEdit', id, title, created)

      this.$router.push({path: 'editThesis', query:{ id , title, created}})
    },

    onDelete(id) {
      console.log('onDelete', id)
      deleteTheses2(id)
      history.go(0)
    },

    onGrade(id){
      console.log('onGrade',id)
    },

    onStudentCheck(sid) {
      console.log('checked...', sid)
      
        choseStudent(uid,sid)
      
    },

    onCreated(){
      this.$router.push({ path:'editThesis'})
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-tag + .el-tag{
    margin-left: 10px;
  }

  .toolbar {
    margin-bottom: 10px;
  }

  .date-picker{
    float: right;
  }
</style>
